<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>菜单栏测试页面</title>
  <link rel="stylesheet" href="./menubar.css">

</head>

<body>

  <!-- <div class="notepad-menubar">
    <ul class="menu-title">
      <li class="title">
        <span class="titletext">帮助(H)</span>
        <ul class="menus">
          
          <li class="menu-item">
            <input type="checkbox" class="checked">新窗口(W)</input>
            <span class="shortcut">Ctrl+Shift+N</span>
          </li>
          <li class="menu-item">
            <span class="disabled">打开(O)...</span>
            <span class="shortcut">Ctrl+O</span>
          </li>
          <li class="menu-item">
            <span class="option">保存(S)</span>
            <span class="shortcut">Ctrl+S</span>
          </li>
          <li class="menu-item">
            <span class="option">另存为(A)</span>
            <span class="shortcut">Ctrl+Shift+S</span>
          </li>
          <li class="menu-hr"></li>
          <div class="hasBorder">
            <li class="menu-item" id="hasBorderTop">
              <span class="option">页面设置(U)...</span>
            </li>
            <li class="disabled menu-item" id="hasBorderBottom">
              <span class="option">打印(P)...</span>
              <span class="shortcut">Ctrl+P</span>
            </li>
          </div>
          <li class="menu-hr"></li>
          <li class="menu-item">
            <span class="option">退出(X)</span>
          </li>
        </ul>
      </li>
      <li class="title">
        <span>编辑(E)</span>
         <ul class="menus">
          
          <li class="menu-item">
            <span class="option">打开(O)...</span>
            <span class="shortcut">Ctrl+O</span>
          </li>
          <li class="menu-item">
            <span class="option">保存(S)</span>
            <span class="shortcut">Ctrl+S</span>
          </li>
          <li class="menu-item">
            <span class="option">另存为(A)</span>
            <span class="shortcut">Ctrl+Shift+S</span>
          </li>
          <li class="menu-hr"></li>
          <div class="hasBorder">
            <li class="menu-item" id="hasBorderTop">
              <span class="option">页面设置(U)...</span>
            </li>
            <li class="disabled menu-item" id="hasBorderBottom">
              <span class="option">打印(P)...</span>
              <span class="shortcut">Ctrl+P</span>
            </li>
          </div>
          <li class="menu-hr"></li>
          <li class="menu-item">
            <span class="option">退出(X)</span>
          </li>
        </ul>
      </li>
      <li class="title">
        <span>帮助(H)</span>
         <ul class="menus" style="display: none;">
          <li class="menu-item">
            <span class="option">新建(N)</span>
            <span class="shortcut">Ctrl+N</span>
          </li>
          <li class="menu-item">
            <span class="oprion">新窗口(W)</span>
            <span class="shortcut">Ctrl+Shift+N</span>
          </li>
      
          <li class="menu-hr"></li>
          <div class="hasBorder">
            <li class="menu-item" id="hasBorderTop">
              <span class="option">页面设置(U)...</span>
            </li>
            <li class="disabled menu-item" id="hasBorderBottom">
              <span class="option">打印(P)...</span>
              <span class="shortcut">Ctrl+P</span>
            </li>
          </div>
          <li class="menu-hr"></li>
          <li class="menu-item">
            <span class="option">退出(X)</span>
          </li>
        </ul> 
      </li>
      
      <li class="title">
        <span>帮助(H)</span>
        <ul class="menus">
          <li class="menu-item">
            <span class="option">新建(N)</span>
            <span class="shortcut">Ctrl+N</span>
          </li>
          <li class="menu-item">
            <span class="oprion">新窗口(W)</span>
            <span class="shortcut">Ctrl+Shift+N</span>
          </li>
          <li class="menu-item">
            <span class="option">打开(O)...</span>
            <span class="shortcut">Ctrl+O</span>
          </li>
          <li class="menu-item">
            <span class="option">保存(S)</span>
            <span class="shortcut">Ctrl+S</span>
          </li>
          <li class="menu-item">
            <span class="option">另存为(A)</span>
            <span class="shortcut">Ctrl+Shift+S</span>
          </li>
          <li class="menu-hr"></li>
          <div class="hasBorder">
            <li class="menu-item" id="hasBorderTop">
              <span class="option">页面设置(U)...</span>
            </li>
            <li class="disabled menu-item" id="hasBorderBottom">
              <span class="option">打印(P)...</span>
              <span class="shortcut">Ctrl+P</span>
            </li>
          </div>
          <li class="menu-hr"></li>
          <li class="menu-item">
            <span class="option">退出(X)</span>
          </li>
        </ul> 
      </li>
    </ul> -->

    <!-- <ul class="menus">
    <li class="menu-item">
      <span class="option">新建(N)</span>
      <span class="shortcut">Ctrl+N</span>
    </li>
    <li class="menu-item">
      <span class="oprion">新窗口(W)</span>
      <span class="shortcut">Ctrl+Shift+N</span>
    </li>
    <li class="menu-item">
      <span class="option">打开(O)...</span>
      <span class="shortcut">Ctrl+O</span>
    </li>
    <li class="menu-item">
      <span class="option">保存(S)</span>
      <span class="shortcut">Ctrl+S</span>
    </li>
    <li class="menu-item">
      <span class="option">另存为(A)</span>
      <span class="shortcut">Ctrl+Shift+S</span>
    </li>
    <li class="menu-hr"></li>
    <div class="hasBorder">
    <li class="menu-item" id="hasBorderTop">
      <span class="option">页面设置(U)...</span>
    </li>
    <li class="disabled menu-item" id="hasBorderBottom">
      <span class="option">打印(P)...</span>
      <span class="shortcut">Ctrl+P</span>
    </li>
  </div>
    <li class="menu-hr"></li>
    <li class="menu-item">
      <span class="option">退出(X)</span>
    </li>
  </ul> -->

  </div>

  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="../../js/data.js"></script>
  <script src="./menubar.js"></script>
  <script>

    $(function () {
      $menubar.show(data)
    })
  </script>
</body>

</html>